<template>
  <Page class="demo-throttle demo-page">
    <h4 class="tips">防抖/节流只能包含原生标签</h4>
    <div class="btn-wrap">
      <Throttle :time="500" events="click" :isDebounce="true">
        <button @click="handlerClick" class="btn">click 防抖</button>
      </Throttle>
      <Throttle :time="500" events="click">
        <button @click="handlerClick" class="btn">click 节流</button>
      </Throttle>
      <Throttle :time="500" events="touchmove" :isDebounce="true">
        <button @touchmove="handlerTouchmove" class="btn">
          touchmove 防抖
        </button>
      </Throttle>
      <Throttle :time="500" events="touchmove">
        <button @touchmove="handlerTouchmove" class="btn">
          touchmove 节流
        </button>
      </Throttle>
    </div>
  </Page>
</template>

<script>
import Throttle from "@/components/common/Throttle";

export default {
  name: "demoThrottle",
  components: {
    Throttle
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    handlerClick() {
      console.log("执行了点击处理函数");
    },
    handlerTouchmove() {
      console.log("执行了触屏处理函数");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
</style>
